<template>
  <div class="box">
    <h1>组件间通信: props</h1>
    <div>count: {{ count }}</div>
    <button @click="increment(4)">自增</button>
    <hr>
    <Child :count="count" :increment="increment"></Child>
  </div>
</template>

<script lang="ts" setup>
// props传参
// props用于父子组件之间的通信
// 父组件给子组件传非函数数据,目的是为了让子组件接收到数据,进行展示
// 父组件给子组件传函数数据,目的是为了让子组件调用这个函数,让父组件修改数据
import { ref } from 'vue';
import Child from './Child.vue';

const count = ref(2)

// const increment = (num: number) => {
//   // count.value++
//   count.value = count.value + num;
// }

const increment = (num = 3) => {
  // count.value++
  count.value = count.value + num;
}
</script>
